<template>
	<view class="form-item-card">
		<view class="form-item-card-row" v-if="label">
			<fui-form-item :asterisk="required" :label="label" label-width="auto">
				<template v-if="$slots.other" #right>
					<slot name="other"></slot>
				</template>
			</fui-form-item>

		</view>

		<view class="slot">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			label: String,
			required: Boolean,

		}
	}
</script>

<style lang="scss" scoped>
	.slot {
		// margin-top: 32rpx;
	}

	.other {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.form {
		&-item {

			&-card {
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;

				&+& {
					margin-top: 32rpx;
				}

				&-row {
					display: flex;
					flex-wrap: nowrap;
					// padding: 32rpx 0;
				}

				&-col {
					flex: 1;
				}

				&-label {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.9);

					&-required {
						color: rgb(255, 43, 43)
					}
				}
			}
		}
	}
</style>